<template>
  <view class="yijianfk-container mainbgc mainpadding">
     <view class="question">
       <textarea name="" id="" cols="30" rows="10" class="question-content" v-model="content" placeholder="请输入您要反馈的问题(5-500字以内)"></textarea>
     </view>
     
     <!-- 问题截图： -->
     <view class="ffffff mainpadding margin-top border-r">
       <view class="titleText">请提供问题的截图或照片（选填）</view>
   	  <view class="flexbottom margin_top jietubox">
   	  	<view class="flexcenter wentibox" v-for="(item,index) in upImg" :key="index">
   	  		<view class="tupianbox">
   	  			<view class="tupian radius">
   	  				<image class="radius" :src="item" mode=""></image>
   	  			</view>
   	  			<view class="xiaotubiao" @click="deleimage(index)">
   	  				<image src="../../static/images/my/chahao.png" mode=""></image>
   	  			</view>
   	  		</view>
   	  	</view>
   	  	<view class=" wentibox" v-if="upImg.length>=4?false:true">
   	  		<view class="beijing" @click="uploadImg">
   				<view class="img">
   				  <image src="../../static/images/my/camera.png" mode=""></image>
   				</view>
   	  		</view>
   	  	</view>
   	  </view>
     </view>
     
     <view class="margin-top ffffff radius mainpadding flexbetween border-r">
     	<view class="nostrongtext">联系方式</view>
     	<input class="inputs" type="text" v-model="phone" placeholder="请输入手机号">
     </view>
     
     <view class="xiaobtn" @click="submit">提交</view>
     <view class="textcenter margin-top history" @click="toHistory()">历史反馈</view>
     
   </view>
  </view>
</template>

<script>
const httpRequest = require("@/common/httpRequest.js")
  export default {
    data() {
      return {
        upImg:[],
        		content:"",
        		phone:''
        }
      },
    methods: {
      toHistory() {
        uni.navigateTo({
          url: '/pages/my/lishifk'
        })
      },
      uploadImg() {
   	  		  	let _this = this;
   	  		  	let upImgs = _this.upImg;
   	  		  	let num = 4 - upImgs.length;
   	  		  	if (num <= 0) {
   	  		  		return false;
   	  		  	}
   	  		  	uni.showActionSheet({
   	  		  		itemList: ['相机', '相册'],
   	  		  		success: function(res) {
   	  		  			// 选择相机走0
   	  		  			if (res.tapIndex == 0) {
   	  		  				httpRequest.chooseImage(num, ['camera']).then(res => {
   	  		  					for (var i = 0; i < res.length; i++) {
   	  		  						_this.uploadImageService(res[i], _this.upImg)
   	  		  					}
   	  		  				}).catch(err => {});
   	  		  			}
   	  		  			// 选择相册走1
   	  		  			if (res.tapIndex == 1) {
   	  		  				httpRequest.chooseImage(num, ['album']).then(res => {
   	  		  					for (var i = 0; i < res.length; i++) {
   	  		  						_this.uploadImageService(res[i], _this.upImg)
   	  		  					}
   	  		  				}).catch(err => {});
   	  		  			}
   	  		  		},
   	  		  		fail: function(res) {}
   	  		  	});
   	  	 },
   		 uploadImageService(url, upImg) {
   		 	let _this = this;
   		 	httpRequest.uploadFile('/api/common/upload', url).then(res => {
   		 		let image_item = res.fullurl;
   		 		upImg.push(image_item);
   		 	}).catch(err => {});
   		 },
   		 //刪除圖片
   		 deleimage(i){
   		 	this.upImg.splice(i,1)
   		 },
   		 //提交评价
   		 submit(){
   		 	if(this.content==""){
   		 		httpRequest.toast("请输入意见反馈")
   		 		return false
   		 	}
   			if(this.content.length<5||this.content.length>500){
   				httpRequest.toast("意见反馈字数应在5-500之间!")
   				return false
   			}
			if(this.phone==""){
				httpRequest.toast("请输入手机号")
				return false
			}
   			const reg=/^1[3578]\d{9}$/
   			if(!this.phone.match(reg)){
   				httpRequest.toast("手机号格式不正确,请重新输入!")
   				return false
   			}
   		 	httpRequest.request('api/user/addFeddback', 'POST', {
   		 		des: this.content,
   		 		images:this.upImg.join(),
   				mobile:this.phone
   		 	}).then(resp => {
   		 		if(resp.code==1){
   		 			setTimeout(() => {
   		 				uni.navigateBack(1)
   		 			}, 1000)
   		 		}
   		 		httpRequest.toast(resp.msg)
   		 	})
   		 }
   }
  }
</script>

<style lang="scss" scoped>
 .question {
    background-color: #fff;
    border-radius: 16rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
	white-space: nowrap;
  }
  textarea::placeholder{
 	  color: #333333;
  }
  .question-content {
	  width: calc( 100% - 54rpx );
    padding: 22rpx 26rpx;
	padding-right: 20rpx;
	font-size: 36rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
  }
  
  
  .titleText {
    font-size: 36rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  
 .jietubox {
 	flex-wrap: wrap;
 }
 
 .tupianbox {
 	position: relative;
 }
 
 .xiaotubiao {
 	position: absolute;
 	top: -14rpx;
 	right: -2rpx;
 	width: 38rpx;
 	height: 38rpx;
 
 	image {
 		width: 100%;
 		height: 100%;
 	}
 }
 .img{
 	 margin-top: 48rpx;
 	 width:200rpx;
 	 height: 200rpx;
     display: flex;
 	 align-items: center;
 	 image {
 	 	width: 100%;
 	 	height: 100%;
 	 }
 }
 
 .tupian {
 	width: 200rpx;
 	height: 200rpx;
 	image {
 		width: 100%;
 		height: 100%;
 	}
 }
 
 .wentibox {
 	width: 25%;
 	display: flex;
 	
 }
 
 
 
  .nostrongtext {
    font-size: 36rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  
  .inputs {
  	width: 75%;
  	text-align: right;
	font-size: 36rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #333333;
  }
  
  .xiaobtn {
  	width: 372rpx;
  	margin: 125rpx auto 0;
  	height: 82rpx;
  	border-radius: 40rpx;
    display: flex;
  	align-items: center;
  	justify-content: center;
  	font-size: 44rpx;
  	font-family: PingFang SC-Medium, PingFang SC;
  	font-weight: 500;
  	color: #FFFFFF;
  	background-color: #00D4E2;
  }
  
  .history {
    font-size: 36rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }
  .radius {
  	border-radius: 20rpx;
  }
  
  
</style>